<template>
    <div class="address-list">
        <div class="list-item" v-for="item in list" :key="item.id">
            <van-row type="flex" align="center">
                <van-col class="list-item-left" span="5">
                    <span>{{ item.name.substr(0, 1) }}</span>
                </van-col>

                <van-col span="14">
                    <van-row>
                        <span>{{ item.name }}</span>
                        <span>{{ item.mobile }}</span>
                    </van-row>

                    <van-row>
                        <van-tag type="primary">{{ item.tag }}</van-tag>
                        <p>{{ item.address }}</p>
                    </van-row>
                </van-col>

                <van-col span="5">
                    <van-button :to="`/address/edit/${item.id}`"
                        >编辑</van-button
                    >
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
import axios from "axios";
export default {
    // DOM 挂载后执行
    created() {
        this.getList();
    },
    data() {
        return {
            list: [],
        };
    },
    methods: {
        async getList() {
            const res = await axios.get("/addresses");
            console.log(res.data.data);
            this.list = res.data.data;
        },
    },
};
</script>

<style lang="less" scoped>
.address-list {
    min-height: 100vh;
    height: 100%;
    background-color: #f3f3f3;
    padding-top: 1px;

    .list-item {
        background-color: #fff;
        margin-top: 15px;

        &-left {
            span {
                display: inline-block;
                width: 55px;
                height: 55px;
                background-color: #999;
                color: #fff;
                border-radius: 50%;
                text-align: center;
                line-height: 55px;
            }
        }
    }
}
</style>
